<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    </style>
    <link th:href="@{/front-resource/css/style.css}" href="../static/front-resource/css/style.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=i35ajZxUvckPkfT5gZ3tzDhYkFb1wRH0"></script>

    <title>地图展示</title>
</head>
<body>
<div class="main-header-area header-sticky" th:fragment="header">
    <div class="container">
        <div class="getfund-nav-container breakpoint-off">
            <!-- getfund Menu -->
            <nav class="getfund-navbar justify-content-between" id="listingNav">

                <!-- Logo -->
                <a class="nav-brand" href="/index/toFront"><img th:src="@{/front-resource/images/logo-header.png}" src="../static/front-resource/images/logo-header.png" alt="logo"></a>

                <!-- Navbar Toggler -->
                <div class="getfund-navbar-toggler"> <span class="navbarToggler"><span></span><span></span><span></span></span> </div>

                <!-- Menu -->
                <div class="getfund-menu">

                    <!-- close btn -->
                    <div class="getfundcloseIcon">
                        <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
                    </div>

                    <!-- Nav Start -->
                    <div class="getfundnav">
                        <ul id="responsive">
                            <li>
                                <a class="current sf-with-ul" href="/index/toFront">首页</a>
                            </li>
                            <li th:if="${session.user}!=null"><a class="sf-with-ul" href="#0">订单</a>
                                <ul class="dropdown">
                                    <li><a href="/frontOrders/selectAll">我的订单</a></li>
                                    <li><a href="/frontOrders/history">历史订单</a></li>
                                </ul>
                            </li>
                            <li><a class="sf-with-ul" href="#0" th:text="${session.user==null?'用户':session.user.username}"></a>
                                <ul class="dropdown">
                                    <li th:if="${session.user}==null"><a href="/login/toLogin">登录</a></li>
                                    <li th:if="${session.user}!=null"><a href="/information/find">个人信息</a></li>
                                    <li th:if="${session.user}!=null"><a href="/logout">注销</a></li>
                                </ul>
                            </li>
                            <li class="right-side">
                                <ul>
                                    <li><a th:href="@{/hotel/display}" class="btn btn-primary" >预订</a></li>
                                    <li th:if="${session.adminUser==true}"><a th:href="@{/index/toBack}" class="btn btn-warning" >系统后台</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <!-- Nav End -->
                </div>
            </nav>
        </div>
    </div>
</div>
<div id="form1" runat="server">

    <div id="r-result" align="center"><b>请输入要搜索的地名:</b>  <input type="text" id="suggestId" size="25" value="百度" style="width:400px;" /></div>
    <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>

    <div id="bdmap" style="width: 100%; height: 600px;" overflow="scroll"></div>



</div>


<div id="allmap"></div>



</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("bdmap");
    //百度地图使用api接口key
    var ak = "i35ajZxUvckPkfT5gZ3tzDhYkFb1wRH0";

    //关键字检索
    function G(id) {
        return document.getElementById(id);
    }

    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    function showInfo(e){
        //alert(e.point.lat + ", " + e.point.lng);
        //点击后显示地理信息
        var lo = +e.point.lat + "," + e.point.lng;

        //ajax调用百度地图api
        jQuery.ajax({
            type: "get",
            dataType: "jsonp",
            url: "http://api.map.baidu.com/geocoder/v2/?location=" + lo + "&output=json&ak=i35ajZxUvckPkfT5gZ3tzDhYkFb1wRH0",
            success: function (data) {

                //alert(data.result.city);
                //$('#city').text(data.toJSONString().parseJSON().status);
                var address = data.result.addressComponent;
                jQuery('#province').val(address.province);
                jQuery('#city').val(address.city);
                jQuery('#country').val(address.district);
                var s = address.street + address.street_number;
                //alert(data.result.sematic_description);
                s += data.result.sematic_description;

                jQuery('#add_detail').val(s);

                jQuery('#location').val(data.result.location.lat + "," + data.result.location.lng);
            }
        });
    }
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            currentPonit = r.point;
            isLocated = true;
            map.centerAndZoom(r.point,14);
            map.panTo(r.point);
            // 创建地理编码实例
            var myGeo = new BMap.Geocoder();
            // 根据坐标得到地址描述
            myGeo.getLocation(r.point, function(result){
                if (result){
                    currentAddress = result.address;
                }
            });
        }
        else
        {
            alert("定位失败："+this.getStatus());
        }
    },{enableHighAccuracy: true});

    map.addEventListener("click", showInfo);
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {"input" : "suggestId"
            ,"location" : map
        });

    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
        setPlace();
    });
    function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);
    }
</script>
